<template>
  <div class="contactWayVo">

    <el-container class="contactWayVo-container">
      <el-aside class="contactWayVo-left" width="300px">
        <div class="qr-groups">
          <wx-group :wx-group="qrcodeGroups" :del-group="deleteGroup" :rename="renameGroup" :select="selectGroup"/>
        </div>
      </el-aside>

      <el-main>
        <div class="contactWayVo-search-box al-top-block">
          <div class="add-btn">
            <el-button size="mini" type="primary" @click="toPage('qrcode-add')">新建员工活码</el-button>
          </div>
          <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
            <el-form-item label="活码名称">
              <el-input size="mini" v-model="searchForm.name" placeholder="活动名称" @keyup.enter.native="qrcodeSearch"/>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="qrcodeSearch" plain>查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="height: calc(100% - 84px);">
          <wx-table ref="qrcodeTab" :test-data="testData" :labels="tabLabels"
                    search-api="/wxqy/qrcode/list"
                    :fixed-right="true"
                    :controls="controls" :sticky="true"
                    :contro-fun="tabControle">
            <template #qrcodeUrl="{param}">
              <el-image :src="param.qrcodeUrl" fit="fill" style="width: 100px; height: 100px"/>
            </template>
            <template #group="{param}">{{ findGroup(param.groupId) }}</template>
            <template #link="{param}">
              <el-image style="width: 100px; height: 100px" :src="param.link" fit="fill"/>
            </template>
            <template #users="{param}">
              <div>
                <wx-tooltip :line="2">
                  <wx-link :type="null" v-for="(e,i) in param.users" :key="i">{{ e.name }}</wx-link>
                </wx-tooltip>
              </div>
            </template>
            <template #tags="{param}">
              <wx-tooltip :line="2">
                <wx-link v-for="(e,i) in param.tags" :key="i">{{ e }}</wx-link>
              </wx-tooltip>
            </template>
          </wx-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import WxGroup from "@/components/wxqy/group/wxGroup";
import WxTable from "@/components/wxqy/table/WxTable";
import WxLink from "@/components/wxqy/wxLink/wxLink";
import WxTooltip from "@/components/wxqy/wxTooltip/wxTooltip";
import {contactWayDelete, wayGroupAdd, wayGroupDelete, wayGroupList} from "@/api/wxqy/contactWay";
import {openWindowTag} from "@/utils/qywx/win";

export default {
  name: "qrcode",
  components: {WxTooltip, WxLink, WxTable, WxGroup},
  data() {
    return {
      qrcodeGroups: [],
      controls: [{label: '编辑', type: 'primary'}, {label: '统计', type: 'primary'},
        {label: '下载', type: 'success'}, {label: '删除', type: 'danger'}],
      //{label: '活码', prop: 'link', width: '120'},
      tabLabels: [{label: '二维码', 'prop': 'qrcodeUrl', width: '120'},
        {label: '活码名称', 'prop': 'title', tooltip: true, width: '160'},
        {label: '活码分组', 'prop': 'group', tooltip: true, width: '100'},
        {label: '使用员工', 'prop': 'users'},
        {label: '标签', 'prop': 'tags'},
        {label: '最近更新时间', 'prop': 'modifyTime', width: '180'},
        {label: '创建者', 'prop': 'creator'}],
      searchForm: {groupId: 0},
      testData: null
    }
  },
  methods: {
    deleteGroup(group) {
      wayGroupDelete(group.id)
    },
    renameGroup(group) {
      wayGroupAdd(group).then(e => {
        this.initContactWayGroup()
      })
    },
    qrcodeSearch() {
      let keyword = this.searchForm.name
      let param = {keyword: keyword}
      if (this.searchForm.groupId > -1) {
        param['groupId'] = this.searchForm.groupId
      }
      this.$refs.qrcodeTab.search(param)
    },
    deleteContactWay(row) {
      this.$confirm(`是否删除「${row.title}」`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        contactWayDelete(row.id || 0).then(e => {
          this.qrcodeSearch()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      })
    },
    tabControle(row, controleIndex) {
      switch (controleIndex) {
        case 0:
          this.toPage('qrcode-add', row.id)
          break
        case 1:
          break
        case 2:
          openWindowTag(row.qrcodeUrl)
          break
        case 3:
          this.deleteContactWay(row)
          break
      }
      if (controleIndex === 0) {
      } else if (controleIndex === 3) {
        this.deleteContactWay(row)
      }
    },
    selectGroup(id) {
      this.searchForm.groupId = id
      this.qrcodeSearch()
    },
    toPage(path, id) {
      this.$router.push({path: path, query: {id: id}})
    },
    findGroup(id) {
      if (id === 0) return "默认分组"
      for (let i = 0; i < this.qrcodeGroups.length; i++) {
        if (this.qrcodeGroups[i].id === id)
          return this.qrcodeGroups[i].name
      }
      return "未知"
    },
    initContactWayGroup() {
      wayGroupList().then(e => {
        this.qrcodeGroups = e.data || []
      })
    },
    async initData() {
      await this.initContactWayGroup()
    }
  },
  created() {
    this.initData()
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/common";

.contactWayVo {
  height: 100%;
  padding-top: 30px;
  overflow-y: auto;

  .contactWayVo-left {
    padding: 0 10px 0 20px;
    overflow: hidden;
    border-radius: 14px;
    height: 100%;
    width: 200px;
  }

  .contactWayVo-container {
    overflow-y: hidden;
    overflow-x: hidden;
    height: 100%;
    padding-bottom: 12px;

    .contactWayVo-search-box {
      @include flex-between;

      .add-btn {
        margin-bottom: 22px;
        width: 200px;

        button {
          width: 100%;
        }
      }
    }
  }

  .el-main {
    padding: 0 20px 0 0;
    overflow-y: hidden;
    margin-left: 10px;
  }
}

::v-deep .al-top-block {
  padding-top: 14px;
}
</style>
